<template>
  <div>
    {{ state }}
    <div class="module-item">
      <a-col :span="4"><span>搜索模块：</span></a-col>
      <a-col :span="6">
        <a-button type="primary" @click="search.visible = true">添加</a-button>
      </a-col>
      <a-button>查看</a-button>
    </div>
    <div class="module-item">
      <a-col :span="4"><span>列表模块：</span></a-col>
      <a-col :span="6">
        <a-button type="primary" @click="table.visible = true">配置列表参数</a-button>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" @click="columns.visible = true">展示列配置</a-button>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" @click="handler.visible = true">操作列配置</a-button>
      </a-col>
      <a-button>预览</a-button>
    </div>
    <div class="module-item">
      <a-col :span="4"><span>弹窗模块：</span></a-col>
      <a-col :span="6">
        <a-button type="primary" @click="popupDetail.visible = true">配置弹框参数</a-button>
      </a-col>
      <a-col :span="6">
        <a-button type="primary" @click="formLabelList.visible = true">编辑表单字段</a-button>
      </a-col>
    </div>
    <div class="module-item">
      <a-col :span="4"><span>生成模块：</span></a-col>
      <a-button type="primary" @click="createFile">确认生成文件</a-button>
    </div>
  </div>

  <!-- 表格详情 -->
  <table-detail
    v-if="table.visible"
    v-model:value="table.form"
    v-model:visible="table.visible"
  ></table-detail>

  <!-- 列表列 -->
  <columns-list
    v-if="columns.visible"
    v-model:data="columns.data"
    v-model:visible="columns.visible"
  ></columns-list>

  <!-- 操作详情 -->
  <handler-detail
    v-if="handler.visible"
    v-model:visible="handler.visible"
    v-model:data="handler.data"
  ></handler-detail>

  <!-- 搜索详情 -->
  <search-detail
    v-if="search.visible"
    v-model:visible="search.visible"
    v-model:data="search.data"
  ></search-detail>

  <!-- 表单字段列表 -->
  <form-label-list
    v-if="formLabelList.visible"
    v-model:visible="formLabelList.visible"
    v-model:data="formLabelList.data"
  ></form-label-list>

  <!-- 弹窗详情配置 -->
  <popup-detail
    v-if="popupDetail.visible"
    v-model:visible="popupDetail.visible"
    v-model:form="popupDetail.form"
  ></popup-detail>
</template>
<script>
import TableDetail from './components/TableDetail';
import ColumnsList from './components/ColumnsList';
import HandlerDetail from './components/HandlerDetail.vue';
import SearchDetail from './components/SearchDetail';
import FormLabelList from './components/FormLabelList';
import PopupDetail from './components/PopupDetail.vue';
import { reactive, defineComponent, toRefs, onMounted, toRaw } from 'vue';
import { getLocal, setLocal } from './utils';
import { apiExportCode } from '@/api/createCode';
import _ from 'lodash-es';
export default defineComponent({
  name: '',
  components: {
    TableDetail,
    ColumnsList,
    HandlerDetail,
    SearchDetail,
    FormLabelList,
    PopupDetail,
  },
  setup() {
    const state = reactive({
      table: {
        visible: false,
        form: {
          hasPagination: 1,
          currentField: '',
          pageSizeField: '',
          totalField: '',
          rowKey: '',
          pageSize: 10,
        },
      },
      handler: {
        visible: false,
        data: [],
      },
      columns: {
        data: [],
        visible: false,
      },
      search: {
        data: [],
        visible: false,
      },
      formLabelList: {
        data: [],
        visible: false,
      },
      popupDetail: {
        form: {
          hasPopup: 1,
          type: 'drawer',
          width: '',
        },
        visible: false,
      },
    });

    onMounted(() => {
      const pagination = getLocal('paginationField', 'object');
      if (pagination) {
        const { currentField = '', pageSizeField = '', totalField = '' } = pagination;
        state.table.form = { ...state.table.form, currentField, pageSizeField, totalField };
      }
    });

    const savePagination = () => {
      const { currentField, pageSizeField, totalField } = state.table.form;
      setLocal('paginationField', { currentField, pageSizeField, totalField });
    };

    const createFile = () => {
      savePagination();
      const form = _.cloneDeep(toRaw(state));
      const table = JSON.stringify(form.table.form);
      const handlerList = JSON.stringify(form.handler.data);
      const columns = JSON.stringify(form.columns.data);
      const search = JSON.stringify(form.search.data);
      const formLabelList = JSON.stringify(form.formLabelList.data);
      const popupDetail = JSON.stringify(form.popupDetail.form);

      apiExportCode({ table, handlerList, columns, search, formLabelList, popupDetail }).then(
        res => {
          let blobUrl = window.URL.createObjectURL(res);
          download(blobUrl);
        },
      );
    };

    function download(blobUrl) {
      const a = document.createElement('a');
      a.style.display = 'none';
      a.download = '文件名.vue'; // 拓展：自行定义
      a.href = blobUrl;
      a.click();
    }

    return {
      ...toRefs(state),
      createFile,
      state,
    };
  },
});
</script>
<style lang="less" scoped>
.module-item {
  display: flex;
  align-self: center;
  width: 800px;
  margin: 10px auto;
  padding: 30px;
  background-color: #ddd;
}
</style>
